<template>
  <div class="game_circle">
    <div class="top">
      <div class="title">圈子</div>
      <div class="top-bar">
        <!-- 导航栏 -->
        <ul class="circle-box">
          <li
            class="circle"
            v-for="item in circle"
            :key="item.id"
            @click="changeGroup(item.id)"
          >
            <img :src="item.log" />
            <div class="circle-name">{{ item.name }}</div>
          </li>
        </ul>
      </div>
      <!-- 选项卡 -->
      <div class="cart">
        <ul class="content-title">
          <li @click="change(1)" :class="sort === 1 ? 'check' : ''">
            新回复
            <div></div>
          </li>
          <li @click="change(2)" :class="sort === 2 ? 'check' : ''">
            新发表
            <div></div>
          </li>
          <li @click="change(3)" :class="sort === 3 ? 'check' : ''">
            热帖
            <div></div>
          </li>
          <li @click="change(4)" :class="sort === 4 ? 'check' : ''">
            精华
            <div></div>
          </li>
        </ul>
      </div>
      <!-- 置顶 -->
      <ul class="content-top" v-if="sort === 1">
        <li
          class="top_content"
          v-for="item in top_article"
          :key="item.id"
          @click="goDetail(item.id)"
        >
          <div class="name-top"><span>置顶</span></div>
          <div class="name-content">
            {{ item.content }}
          </div>
        </li>
      </ul>
      <!-- content列表 -->
      <article-list></article-list>
    </div>
    <bottom-selector></bottom-selector>
  </div>
</template>
<script>
import { mapGetters, mapMutations } from "vuex";
import ArticleList from "@/components/articleList.vue";
import bottomSelector from "@/components/bottomSelector.vue";
export default {
  data() {
    return {
      circle: [], //头部导航
    };
  },
  components: {
    ArticleList,
    bottomSelector,
  },
  created() {
    this.getBar();
  },
  mounted() {},
  methods: {
    ...mapMutations("articles", [
      "changeTopArticle",
      "changeArticleList",
      "changeArticle_id",
      "changeGroup_id",
      "changeCircleGroup",
    ]),
    ...mapMutations("articles", ["changeSort"]),
    //获取头部导航朋友圈
    async getBar() {
      const res = await this.$axios.get("https://api.vgn.cn/apiv2/group/list");
      this.circle = res.data;
    },
    //获取朋友圈数据
    async getCircle(group_id) {
      const resList = await this.$axios.get(
        `https://api.vgn.cn/apiv2/group/article/list?group_id=${String(
          group_id
        )}&page=1&page_size=20&sort=1`
      );
      this.changeArticleList(resList.data);
      const resTop = await this.$axios.get(
        `https://api.vgn.cn/apiv2/group/article/top?group_id=${String(
          group_id
        )}`
      );
      this.changeTopArticle(resTop.data);
    },
    // async getNewArticleList(sort, page, page_size) {
    //   const res = await this.$axios.get();
    //请求所有朋友圈信息 https://api.vgn.cn/apiv2/group/article/index?page=1&sort=1&page_size=20
    //请求个人朋友圈 https://api.vgn.cn/apiv2/group/article/list?group_id=16&page=1&page_size=20&sort=2
    // },
    //个人游戏圈
    async getNewGroupArtlist() {
      const res = await this.$axios.get(
        `https://api.vgn.cn/apiv2/group/article/list?group_id=${this.group_id}&page=1&page_size=20&sort=${this.sort}`
      );
      this.changeArticleList(res.data ? res.data : []);
    },
    //请求所有游戏圈
    async getArticleList() {
      const res = await this.$axios.get(
        `https://api.vgn.cn/apiv2/group/article/index?page=${String(
          this.page
        )}&sort=${String(this.sort)}&page_size=${String(this.pagesize)}`
      );
      console.log(res);
      this.changeTopArticle(res.data.top_article);
      this.changeArticleList(res.data.article_list);
    },
    change(sort) {
      this.changeSort(sort);
      if (!this.circleGroup) {
        this.getArticleList();
      } else {
        this.getNewGroupArtlist();
      }
    },
    //改变朋友圈分组
    changeGroup(group_id) {
      //开启个人朋友圈
      this.changeCircleGroup(true);
      //改变group_id
      this.changeGroup_id(group_id);
      //重置sort
      this.changeSort(1);
      //改变当前朋友圈数据
      this.getCircle(group_id);
    },
    //去朋友圈详情页
    goDetail(id) {
      this.changeArticle_id(id);
      this.$router.push({ path: `/detail/${String(id)}`, params: { id: id } });
    },
  },
  computed: {
    ...mapGetters("articles", [
      "sort",
      "top_article",
      "page",
      "pagesize",
      "group_id",
      "circleGroup",
    ]),
  },
};
</script>
<style lang="less" scoped>
@import "@/style/index";
.game_circle {
  position: absolute;
  background: rgba(245, 246, 248);
  .top(0);
  .left(0);
  .right(0);
  .bottom(0);
  .title {
    .height(30);
    .padding(0,0,0,20);
    .line-height(30);
    font-size: 20px;
  }
  .top {
    .top-bar {
      overflow: hidden;
      overflow-x: scroll;
      .width(375);
      .circle-box {
        white-space: nowrap;
        .circle {
          display: inline-block;
          .padding(0,0,0,20);
          // flex-direction: column;
          // align-items: center;
          // justify-items: center;
          .width(80);
          .height(100);
          img {
            .width(60);
            .height(60);
            .border-radius(5,5,5,5);
            .margin(10,0,10,0);
          }
          .circle-name {
            .width(65);
            text-align: center;
            overflow: hidden;
          }
        }
      }
    }
    .title {
      .fontSize(14);
      .padding(0,0,0,16);
      .margin(12,0,2,0);
    }
    // 选项卡
    .cart {
      position: sticky;
      z-index: 2;
      .top(-1);
      background-color: #fff;
      .content-title {
        .margin(10,0,0,0);
        background: white;
        .width(375);
        display: flex;
        justify-content: space-around;
        align-items: center;
        li {
          .height(45);
          .line-height(40);
          font-size: 18px;
          white-space: nowrap;
          text-align: center;
          display: flex;
          flex-direction: column;
          align-items: center;
          color: rgba(150, 150, 150);
        }
        .check {
          .height(45);
          .line-height(40);
          font-size: 18px;
          white-space: nowrap;
          text-align: center;
          display: flex;
          flex-direction: column;
          align-items: center;
          color: black;
          div {
            .width(20);
            border: 1px solid black;
          }
        }
      }
    }
    .content-top {
      .width(375);
      .margin(2,0,0,0);
      background: white;
      .top_content {
        display: flex;
        .height(45);
        font-size: 14px;
        .name-top {
          .width(80);
          span {
            font-size: 12px;
            .width(40);
            .height(16);
            .line-height(45);
            .padding(0,10,0,10);
            .border-radius(8,8,8,8);
            .margin(0,0,0,15);
            white-space: nowrap;
            background: rgba(240, 251, 247);
            color: rgba(36, 192, 103);
            text-align: center;
          }
        }
        .name-content {
          .width(280);
          .height(45);
          .line-height(45);
          overflow: hidden;
          border-bottom: 1px solid #ccc;
        }
      }
      li:last-child {
        .name-content {
          border: 0px;
        }
      }
    }
    // 用户 文本框标签
    .content {
      .margin(10,0,0,0);
      background: rgba(245, 246, 248);
      .cont {
        .margin(10,0,10,0);
        background: white;
        // 用户头标签
        .user-info {
          .padding(0,0,0,20);
          .height(60);
          display: flex;
          align-items: center;
          img {
            .width(40);
            .height(40);
            .border-radius(20,20,20,20);
          }
          .info {
            .height(60);
            .margin(0,0,0,10);
            display: inline-block;
            display: flex;
            justify-content: center;
            flex-direction: column;
          }
        }
        // 用户文本标签
        .user-content {
          .padding(0,20,0,20);
        }
        .image-box {
          display: flex;
          flex-wrap: wrap;
          .padding(0,0,0,20);
          .one {
            .margin(4,0,0,4);
            img {
              .width(250);
              .height(120);
            }
          }
          .two {
            .margin(4,0,0,4);
            img {
              .width(105);
              .height(105);
            }
          }
        }
        // 用户来源
        .user-device {
          background: #ccc;
          div {
            background: white;
            display: flex;
            align-items: center;
            .padding(0,0,0,20);
            .height(50);
            img {
              z-index: 1;
              .border-radius(20,20,20,20);
              .width(30);
              .height(30);
            }
            p {
              .line-height(20);
              .padding(5,20,5,30);
              .border-radius(10,10,10,10);
              .margin(0,0,0,-20);
              background: #ccc;
            }
          }
        }
        // 文本信息
        .content-info {
          .width(375);
          display: flex;
          background: rgba(245, 246, 248);
          div {
            .margin(3,0,0,0);
            .width(187.5);
            .height(60);
            text-align: center;
            .line-height(60);
            background: white;
            img {
              .margin(0,5,0,0);
            }
          }
        }
      }
    }
  }
}
</style>
